<template>
    <van-nav-bar title="设置" left-text="" left-arrow @click-left="onClickLeft" />

    <div id="setting">

        <div class="setting-top">
            <div class="user-img">
                <img class="avatar"
                    src="https://tse3-mm.cn.bing.net/th/id/OIP-C.a-s6McJd6qTU6HqijUBisAHaHa?rs=1&pid=ImgDetMain" alt="">
            </div>
            <div style="margin-top: 2rem;">
                Axlab社区团购介绍
            </div>
        </div>
        <div class="setting-content">
            <div class="setting-item" @click="showPicker = true">
                <div class="setting-item-title">选择语言</div>
                <div class="setting-item-icon">
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="setting-item">
                <div class="setting-item-title">选择语言</div>
                <div class="setting-item-icon">
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="setting-item">
                <div class="setting-item-title">选择语言</div>
                <div class="setting-item-icon">
                    <van-icon name="arrow" />
                </div>
            </div>
        </div>
        <div class="setting-bottom" @click="gotoLogin">
            <div class="but">
                <!-- 退出登录 -->
                {{ $t('setting.logout') }}
            </div>
        </div>
        <van-popup v-model:show="showPicker" round position="bottom">
            <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
        </van-popup>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router';

const { t, locale } = useI18n()
const router= useRouter()

const onClickLeft = () => {
    window.location.href = '/me'
}

let change = () => {
    locale.value = "ja"
    localStorage.setItem("lang", "ja")
}
const gotoLogin=()=>{
    localStorage.removeItem("accessToken")
    localStorage.removeItem("user")
    localStorage.removeItem("refreshToken")
    router.push('/login')
}

// 切换语言
const columns = [
    { text: '中文', value: 'zh' },
    { text: '英文', value: 'en' },
    { text: '日文', value: 'ja' },
];
const fieldValue = ref('');
const showPicker = ref(false);
const onConfirm = ({ selectedOptions }) => {
    showPicker.value = false;
    locale.value = selectedOptions[0].value;
    localStorage.setItem("lang", selectedOptions[0].value)
};


</script>

<style scoped lang="less">
#setting {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    align-items: center;

    .setting-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 2.8343rem;

        .user-img {
            width: 3.4012rem;
            height: 3.4012rem;
            border-radius: 50%;
            margin-right: 10px;

            .avatar {
                width: 3.4012rem;
                height: 3.4012rem;
                border-radius: 50%;
            }
        }

    }

    .setting-content {
        width: 100%;
        margin: 5.6686rem;

        .setting-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 1rem;
            height: 2.8343rem;
        }
    }

    .setting-bottom {
        width: 100%;
        margin-top: 5.6686rem;

        .but {
            margin: 0 1.1337rem;
            padding: .6802rem;
            border-radius: 2.8343rem;
            text-align: center;
            color: #fff;
            background: linear-gradient(to right, #ff1000, #ff5b00);

        }
    }
}
</style>